<template>
  <view class="voice-container">
   
    
    <!-- 配音卡片 -->
    <view class="voice-card">
      <view class="voice-info">
        <view class="voice-icon">
          <image class="family-icon" src="/static/family-icon.svg" mode="aspectFit"></image>
          <text class="family-text">MY FAMILY</text>
          <text class="family-subtitle">Family</text>
        </view>
        <view class="voice-details">
          <text class="voice-title">My Family</text>
          <view class="voice-meta">
            <text class="score-label">系统评分：</text>
            <text class="score-value">{{ systemScore }}分</text>
          </view>
          <view class="voice-meta">
            <text class="time-label">录制时间：</text>
            <text class="time-value">{{ recordTime }}</text>
          </view>
        </view>
      </view>
      
      <!-- 操作按钮 -->
      <view class="action-buttons">
        <view class="play-btn" @click="playVoice">
          <text class="play-icon">▶</text>
          <text class="play-text">播放</text>
        </view>
        <view class="share-btn" @click="shareVoice">
          <text class="share-icon">🔗</text>
          <text class="share-text">分享</text>
        </view>
      </view>
    </view>
    
    <!-- 空状态提示 -->
    <view class="empty-state">
      <text class="empty-text">-- 没有更多数据了 --</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      systemScore: 0,
      recordTime: '06-28 17:02'
    }
  },
  
  onLoad() {
    // 获取状态栏高度
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight || 0;
    
    // 加载配音数据
    this.loadVoiceData();
  },
  
  methods: {
    /**
     * 返回上一页
     */
    goBack() {
      uni.navigateBack();
    },
    
    /**
     * 加载配音数据
     */
    loadVoiceData() {
      // 这里可以调用API获取配音数据
      // 暂时使用模拟数据
      this.systemScore = 0;
      this.recordTime = '06-28 17:02';
    },
    
    /**
     * 播放配音
     */
    playVoice() {
      uni.showToast({
        title: '开始播放配音',
        icon: 'none'
      });
      // 这里可以实现音频播放功能
    },
    
    /**
     * 分享配音
     */
    shareVoice() {
      uni.showToast({
        title: '分享配音',
        icon: 'none'
      });
      // 这里可以实现分享功能
    }
  }
}
</script>

<style lang="scss" scoped>
.voice-container {
  background-color: #f8f9fa;
  min-height: 100vh;
}

.status-bar {
  width: 100%;
  background-color: #fff;
}

// 顶部导航栏
.header {
  background: #fff;
  padding: 30rpx 40rpx;
  display: flex;
  align-items: center;
  position: relative;
  
  .back-btn {
    position: absolute;
    left: 40rpx;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .back-icon {
      font-size: 48rpx;
      color: #333;
      font-weight: bold;
    }
  }
  
  .title {
    flex: 1;
    text-align: center;
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
  }
}

// 配音卡片
.voice-card {
  margin: 40rpx 40rpx;
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.voice-info {
  display: flex;
  margin-bottom: 40rpx;
}

.voice-icon {
  width: 120rpx;
  height: 120rpx;
  background: linear-gradient(135deg, #ff9500, #ff6b00);
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 30rpx;
  position: relative;
  
  .family-icon {
    width: 40rpx;
    height: 40rpx;
    margin-bottom: 8rpx;
  }
  
  .family-text {
    font-size: 20rpx;
    color: #fff;
    font-weight: bold;
    line-height: 1;
  }
  
  .family-subtitle {
    font-size: 16rpx;
    color: #fff;
    opacity: 0.8;
    line-height: 1;
  }
}

.voice-details {
  flex: 1;
  
  .voice-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 20rpx;
    display: block;
  }
  
  .voice-meta {
    display: flex;
    align-items: center;
    margin-bottom: 12rpx;
    
    .score-label,
    .time-label {
      font-size: 28rpx;
      color: #666;
    }
    
    .score-value {
      font-size: 28rpx;
      color: #ff9500;
      font-weight: 600;
    }
    
    .time-value {
      font-size: 28rpx;
      color: #666;
    }
  }
}

// 操作按钮
.action-buttons {
  display: flex;
  gap: 30rpx;
}

.play-btn,
.share-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
}

.play-btn {
  background: #f5f5f5;
  border: 2rpx solid #e0e0e0;
  
  .play-icon {
    font-size: 24rpx;
    color: #666;
  }
  
  .play-text {
    font-size: 28rpx;
    color: #666;
  }
}

.share-btn {
  background: #007aff;
  
  .share-icon {
    font-size: 24rpx;
    color: #fff;
  }
  
  .share-text {
    font-size: 28rpx;
    color: #fff;
    font-weight: 500;
  }
}

// 空状态
.empty-state {
  text-align: center;
  margin-top: 100rpx;
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}
</style>